<html>
<header>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <link href="./index.css" rel="stylesheet">
</header>

<body>
  <div class="flex">
    <div class="tag h1" name="B5">
      <p>7</p>
    </div>
    <div class="tag h2" name="G5">
      <p>5</p>
    </div>
    <div class="tag h3" name="E5">
      <p>3</p>
    </div>
    <div class="tag h4" name="C5">
      <p>1</p>
    </div>
    <div class="tag h5" name="A4">
      <p>6<span>.</span></p>
    </div>
    <div class="tag h6" name="F4">
      <p>4<span>.</span></p>
    </div>
    <div class="tag h7" name="D4">
      <p>2<span>.</span></p>
    </div>
    <div class="tag " name="C4">
      <p>1<span>.</span></p>
    </div>
    <div class="tag h7" name="E4">
      <p>3<span>.</span></p>
    </div>
    <div class="tag h6" name="G4">
      <p>5<span>.</span></p>
    </div>
    <div class="tag h5" name="B4">
      <p>7<span>.</span></p>
    </div>
    <div class="tag h4" name="D5">
      <p>2</p>
    </div>
    <div class="tag h3" name="F5">
      <p>4</p>
    </div>
    <div class="tag h2" name="A5">
      <p>6</p>
    </div>
    <div class="tag h1" name="C6">
      <p><span>.</span>1</p>
    </div>
  </div>

  <div class="flex top">
    <div class="tag h1" name="B7">
      <p><span>.</span><span>.</span>7</p>
    </div>
    <div class="tag h2" name="G7">
      <p><span>.</span><span>.</span>5</p>
    </div>
    <div class="tag h3" name="E7">
      <p><span>.</span><span>.</span>3</p>
    </div>
    <div class="tag h4" name="C7">
      <p><span>.</span><span>.</span>1</p>
    </div>
    <div class="tag h5" name="A6">
      <p><span>.</span>6</p>
    </div>
    <div class="tag h6" name="F6">
      <p><span>.</span>4</p>
    </div>
    <div class="tag h7" name="D6">
      <p><span>.</span>2</p>
    </div>
    <div class="tag " name="C6">
      <p><span>.</span>1</p>
    </div>
    <div class="tag h7" name="E6">
      <p><span>.</span>3</p>
    </div>
    <div class="tag h6" name="G6">
      <p><span>.</span>5</p>
    </div>
    <div class="tag h5" name="B6">
      <p><span>.</span>7</p>
    </div>
    <div class="tag h4" name="D7">
      <p><span>.</span><span>.</span>2</p>
    </div>
    <div class="tag h3" name="F7">
      <p><span>.</span><span>.</span>4</p>
    </div>
    <div class="tag h2" name="A7">
      <p><span>.</span><span>.</span>6</p>
    </div>
    <div class="tag h1" name="C8">
      <p><span>.</span><span>.</span><span>.</span>1</p>
    </div>
  </div>
</body>
<script src="./jquery.min.js"></script>
<script src="./music.js"></script>
<script>
  $("body").on("touchstart", function (e) {
    if ($(e.target).hasClass("tag")) {
      tagTouch($(e.target).attr("name"));
    }
  });
  function tagTouch(src) {
   var audio = $('<audio src="' + Music[src] + '" autoplay>');
    $("body").append(audio);
    setTimeout(function () {
      audio.remove();
    }, 1000);
  }
</script>

</html>